<!-- 告警中心 -->

<template>
  <div class="More">
    <div class="container">
      <!-- 顶部查询 -->
      <div class="top-search">
        <div class="search-handler">
          <el-button type="text" @click="$router.history.go(-1)">
            <i class="el-icon-back"></i>
            <!-- <img src="../../../../assets/img/alarm/back.png"> -->
            返回
          </el-button>
        </div>
        <div class="search-term">
          <el-input
            v-model="model.searchData.deviceName"
            placeholder="输入设备名称"
            clearable
            @keydown.enter.native="toSearch"
          >
          </el-input>
          <el-select v-model="model.searchData.alarmLevelId" placeholder="告警等级" clearable @change="toSearch">
            <el-option
              v-for="item in DICT.LEVEL"
              :key="item.id"
              :label="item.propertyLabel"
              :value="item.propertyValue"
            >
            </el-option>
          </el-select>
          <el-select v-model="model.searchData.subSystemId" placeholder="子系统" clearable @change="toSearch">
            <el-option
              v-for="item in DICT.SUB_SYSTEM"
              :key="item.id"
              :label="item.propertyLabel"
              :value="item.propertyValue"
            >
            </el-option>
          </el-select>
          <el-form>
            <FormDateRange
              bind="alarmTimeBegin, alarmTimeEnd"
              :one="model.searchData"
              format
              :style="{ margin: 0 }"
              history
              @change="toSearch"
            />
          </el-form>
          <el-button type="primary" icon="el-icon-search" @click="toSearch">查询</el-button>
        </div>
      </div>
      <!-- 表格数据 -->
      <el-table ref="systemLogMultipleTable" class="table-list" :data="list" stripe height="100%">
        <el-table-column
          label="告警时间"
          prop="alarmTime"
          align="center"
          :formatter="(row) => formatterTime('alarmTime', row)"
        >
        </el-table-column>
        <el-table-column label="告警等级" prop="alarmLevelId" align="center">
          <template v-slot="scope">
            <div v-if="scope.row.alarmLevelId === 1" class="text-purple-500">一般</div>
            <div v-else-if="scope.row.alarmLevelId === 2" class="text-yellow-500">重要</div>
            <div v-else-if="scope.row.alarmLevelId === 3" class="text-red-400">紧急</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column label="子系统" width="120" prop="subSystemName" align="center"></el-table-column>
        <el-table-column label="设备" width="120" prop="alarmResName" align="center"></el-table-column>
        <el-table-column :label="CORE.MAP.REGION" width="180" prop="areaName" align="center"></el-table-column>
        <el-table-column label="告警类型" width="100" prop="alarmTypeName" align="center"></el-table-column>
        <el-table-column label="处理状态" prop="alarmResolveState" align="center">
          <template v-slot="scope">
            <div v-if="scope.row.alarmResolveState === 2" class="text-green-400">已处理</div>
            <div v-else class="text-yellow-500">未处理</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template v-slot="scope">
            <el-button type="text" @click="openModel(scope.row, '告警详情', 'alarmDetail')"> 查看 </el-button>
            <el-button type="text">
              <el-dropdown trigger="click">
                <span style="color: #0293ff">处理</span>
                <i class="el-icon-caret-bottom" style="color: #0293ff"></i>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="1">
                      <!-- <div @click="openModel(scope.row, '新增工单', 'formModal1')">转工单</div> -->
                      <div @click="deal({ ...scope.row }, 1)">转工单</div>
                    </el-dropdown-item>
                    <el-dropdown-item command="2">
                      <div @click="openModel(scope.row, '误报消除', 'formModal2')">误报消除</div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="deal({ ...scope.row }, 3)">已解决</div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="deal({ ...scope.row }, 4)">忽略</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <span class="mr-4">共 {{ model.pagination.total }} 条</span>
        <el-pagination
          :current-page.sync="model.pagination.page"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="model.pagination.pageSize"
          layout="sizes, prev, pager, next"
          :total="model.pagination.total"
          @size-change="handleSizeChange"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <!-- 详情弹窗 -->
      <Detail ref="alarmDetail" @refreshDataList="getList" />
      <!-- 误报消除（弹窗） -->
      <form-modal2 ref="formModal2" @refreshDataList="getList"></form-modal2>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import index from './mixIndex'
// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'More',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixLoop(), index],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('../', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      loop: true, // 循环开关
      LOOP_PERIOD: 600, // 循环周期 (单位秒，默认 10 分钟)
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 循环事件 (可覆盖)
     */
    toLoop() {
      //
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
